<template>
	<div id="app" class="weui-tab">
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
				<header class="demos-header"><span class="header-title">水价信息</span></header>
				<div class="weui-cells">
					<div class="weui-cells__title">户表选择</div>
					<div class="weui-cell weui-cell_select">
						<div class="weui-cell__bd">
							<select class="weui-select" v-model="index"  @change="onChange">
								<option :value="index" v-for="(item,index) in userList" :key="index">表号：{{item.meterNumber}}</option>
							</select>
						</div>
					</div>
					<div class="weui-cells__title">价格信息</div>
					<div class="weui-cell"  v-if="chargingplanInfo!=null">
						<div class="weui-cell__bd">
							<p>价格名称：</p>
						</div>
						<!-- <div class="weui-cell__ft">居民水价（加压）</div> -->
						<div class="weui-cell__ft">{{chargingplanInfo.chargingPlanName}}</div>
					</div>
					<div class="weui-cells__title">水价明细</div>
					<div class="weui-cells">
						<div class="weui-cell">
							<table class="mobile-table" style="width: 100%;">
								<thead class="mobile-thead">
									<th>项目名称</th>
									<th>收费类型</th>
									<th>用量(吨)</th>
									<th>价格</th>
								</thead>
								<tbody class="mobile-tbody" v-if="chargingplanInfo!=null">
									<tr v-if="chargingplanInfo.chargingType==3" v-for="(item,index) in chargingplanInfo.chargingPlanCont.tiers" :key="index">
										<td>{{index+1}}阶</td>
										<td>阶梯收费</td>
										<td>{{parseFloat(item.startAmount).toFixed(2)}}以上</td>
										<td>{{parseFloat(item.price).toFixed(2)}}元/吨</td>
									</tr>
									<tr v-if="chargingplanInfo.chargingType==4">
										<td>水费</td>
										<td>按吨收费</td>
										<td>-</td>
										<td>{{parseFloat(chargingplanInfo.chargingPlanCont.price).toFixed(2)}}元</td>
									</tr>
									<tr v-if="chargingplanInfo.sewagePrice>0&&chargingplanInfo.sewageType==3">
										<td>污水处理费</td>
										<td>按吨收费</td>
										<td>-</td>
										<td>{{parseFloat(chargingplanInfo.sewagePrice).toFixed(2)}}元</td>
									</tr>
									<tr v-if="chargingplanInfo.isMinGuarantee==1">
										<td>基础</td>
										<td>保底费用</td>
										<td>{{parseFloat(chargingplanInfo.minGuarantee).toFixed(2)}}以下</td>
										<td>{{parseFloat(chargingplanInfo.minPrice).toFixed(2)}}元</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div><br><br>
			</div>
		</div>
		<div class="weui-tabbar">
			<navigator url="/pages/index/index" class="weui-tabbar__item weui-bar__item--on router-link-active">
				<div class="weui-tabbar__icon"><img src="static/home-logo.png" alt=""></div>
				<p class="weui-tabbar__label">首页</p>
			</navigator>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userList:[],
				index:0,
				code:'',
				chargingplanInfo:{
					chargingPlanCont:{}
				},
			}
		},
		onLoad() {
			var _this=this;
			this.$util.checkLogin(function(token){
				console.log("token:"+token)
				_this.$request.getUserList(token,function(list){
					_this.userList=list;
					//首先获取第一个水表的缴费方案
					if(list.length>0){
						_this.getChargingPlan(list[0].meterId);
					}
				})
			})
		},
		methods: {
			getChargingPlan(meterId){
				uni.showLoading({
					mask:true,
					title:"加载中...."
				})
				this.chargingplanInfo = null
				this.$request.get('wechat/getChargingPlan',{
					meterId:meterId
				}).then(res=>{
					this.chargingplanInfo = res.result
					this.chargingplanInfo.chargingPlanCont = JSON.parse(res.result.chargingPlanCont)
				})
			},
			onChange(){
				console.log("改变的水表信息为：",this.index)
				if(this.userList.length>0){
					//调用获取缴费方案信息
					this.getChargingPlan(this.userList[this.index].meterId);
				}
			},
		}
	}
</script>

<style>
	.mobile-tbody tr td{
		text-align: center;
	}
</style>
